<template>
    <div class="index">
        <!-- 数据统计 -->
        <div class="count">
            <div>
                <i class="el-icon-document" style="color:#1296db"></i>
                <span>
                    <strong>总订单</strong>{{form.totalOrder}}
                </span>
            </div>
            <div>
                <i class="el-icon-coin" style="color:#d4237a"></i>
                <span>
                    <strong>总销售额</strong>{{form.totalAmount}}
                </span>
            </div>
            <div>
                <i class="el-icon-s-order" style="color:#1296db"></i>
                <span>
                    <strong>今日订单数</strong>{{form.todayOrder}}
                </span>
            </div>
            <div>
                <i class="el-icon-printer" style="color:#1afa29"></i>
                <span>
                    <strong>今日销售额</strong>{{form.totayAmount}}
                </span>
            </div>
        </div>

        <!-- 图表 -->
        <div id="box" ref="box">

        </div>
    </div>
</template>

<script>
// 引入ECharts图标库
import * as echarts from 'echarts';
// 引入报表统计模块
import {totalData} from "@/api/report.js";

export default {
    data(){
        return {
            form:{
                totalOrder: 0,
                totalAmount: 0,
                todayOrder: 0,
                totayAmount: 0
            }
        }
    },

    // 注意：代码必须写在mounted里面，才能获取到页面容器
    async mounted(){
        let res = await totalData();
        this.form = res.data;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.box);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '数据统计',
                top:10,
                left:20,
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['订单数据', '金额数据'],
                top:10,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.xData,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                name: '订单数据',
                type: 'line',
                stack: 'Total',
                data: res.data.orderData
                },
                {
                name: '金额数据',
                type: 'line',
                stack: 'Total',
                data: res.data.amountData
                },
            ]
        });

        // 重置大小
        window.onresize = function(){
            myChart.resize();
        }
    },

    destroyed(){
        window.onresize = null;  //组件销毁时自动去除window事件
    }
}
</script>

<style lang="less" scoped>
// 数据统计
.count{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    &>div{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 24%;
        height: 80px;
        background-color: #fff;

        i{
            font-size: 60px;
        }

        span{
            font-size: 24px;

            strong{
                display: block;
                font-size: 18px;
                color: #999;
                font-weight: 500;
            }
        }

    }
}

// 图表
#box{
    height: 470px;
    background-color: #fff;
}
</style>